<template>
    <div class="postBox">
        <div class="postCenter">
            <div class="postLeft">
                <div class="postLeftTop">
                    选择职位
                </div>
                <div class="postLeftBot">
                    <div class="postLeftBotThr">
                        <div @click="checksLeftClick()">
                            <img v-show="checkLeftShow" src="/static/img/on@2x.png" alt="">
                            <img v-show="!checkLeftShow" src="/static/img/out@2x.png" alt="">
                        </div>
                        <div>
                            <span>全选</span>
                        </div>
                    </div>
                    <div class="postLeftBotFour">
                        <ul>
                            <li v-for="(item,index) in selectLeftlists" :key="index">
                                <div class="centerLeftBotFourLiL">
                                    <div @click="checkLeftClick(index)">
                                        <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                        <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                    </div>
                                    {{item.value}}
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="postcenterCenter">
                <div @click="commodityLeftClick">
                    <img src="/static/img/xright@2x.png" alt="">
                </div>
                <div @click="commodityRightClick">
                    <img src="/static/img/xleft@2x.png" alt="">
                </div>
            </div>
            <div class="postcenterRight">
                <div class="postRightTop">
                    已选职位
                </div>
                <div class="postLeftBot">
                    <div class="postLeftBotThr" v-show='selectRightlists.length > 0'>
                        <div @click="checksRightClick()">
                            <img v-show="checkRightShow" src="/static/img/on@2x.png" alt="">
                            <img v-show="!checkRightShow" src="/static/img/out@2x.png" alt="">
                        </div>
                        <div>
                            <span>全选</span>
                        </div>
                    </div>
                    <div class="postLeftBotFour">
                        <ul>
                            <li v-for="(item,index) in selectRightlists" :key="index">
                                <div class="centerLeftBotFourLiL">
                                    <div @click="checkRightClick(index)">
                                        <img v-show="item.open" src="/static/img/on@2x.png" alt="">
                                        <img v-show="!item.open" src="/static/img/out@2x.png" alt="">
                                    </div>
                                    {{item.value}}
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="ModalsmemBot">
            <el-button type="primary" size="medium" @click="postOkClick">确认</el-button>
            <el-button type="info" size="medium" @click="postCancelClick">取消</el-button>
        </div>
    </div>
</template>
<script>
    import { mapActions } from "vuex";
    export default {
        data() {
            return {
                list: [

                ],
                navLists: [],
                selectLeftlists: [],  //未选职位
                selectRightlists: [],//已选职位
                checkLeftShow: false,  //左边全选
                checkRightShow: false,  //右边全选

            };
        },
        created: function () {
            var self = this
        },
        mounted() {
            var self = this
            self.checkLeftShow = false
            mapFun.$on('postSelectFun', (obj) => {
                self.selectRightlists = []
                obj.forEach(ele => {
                    self.selectRightlists.push({
                        value: ele.value,
                        id: ele.id,
                        open: false,
                    })
                })
                self.getapiorgLabelValueList({
                    companyId: sessionStorage.getItem("ORGID"),
                    labelType: 1,
                }).then(data => {
                    self.selectLeftlists = []
                    if (data.statusCode == 200) {
                        if (data.data) {
                            data.data.forEach(ele => {
                                self.selectLeftlists.push({
                                    open: false,
                                    value: ele.value,
                                    id: ele.id,
                                })
                            });
                            if (obj.length > 0) {
                                for (let i = 0; i < self.selectLeftlists.length; i++) {
                                    for (let j = 0; j < obj.length; j++) {
                                        if (self.selectLeftlists[i].id == obj[j].id) {
                                            self.selectLeftlists[i].open = true
                                        }
                                    }
                                }
                            }
                            self.checkLeftShow = true
                            for (let i = 0; i < self.selectLeftlists.length; i++) {
                                if (self.selectLeftlists[i].open == false) {
                                    self.checkLeftShow = false
                                }
                            }
                            self.checkRightShow = false
                        }
                    } else {
                        self.$message(data.statusMessage);
                    }
                }).catch(msg => {
                    self.$message("服务器异常");
                })
            })
        },
        methods: {
            // 所有序号被选中时
            checksLeftClick() {
                var self = this
                self.checkLeftShow = !self.checkLeftShow
                if (self.checkLeftShow == true) {
                    for (let i = 0; i < self.selectLeftlists.length; i++) {
                        self.selectLeftlists[i].open = true
                    }
                } else {
                    for (let i = 0; i < self.selectLeftlists.length; i++) {
                        self.selectLeftlists[i].open = false
                    }
                }
            },
            //单选职位左边
            checkLeftClick(index) {
                var self = this
                self.checkLeftShow = true
                self.selectLeftlists[index].open = !self.selectLeftlists[index].open
                for (let i = 0; i < self.selectLeftlists.length; i++) {
                    if (self.selectLeftlists[i].open == false) {
                        self.checkLeftShow = false
                    }
                }
            },
            //右箭头
            commodityLeftClick() {
                var self = this
                // self.selectRightlists = []
                let arr = []
                for (let i = 0; i < self.selectLeftlists.length; i++) {
                    if (self.selectLeftlists[i].open == true) {
                        arr.push({
                            value: self.selectLeftlists[i].value,
                            id: self.selectLeftlists[i].id,
                            open: false,
                            idShow: false,
                        })
                    }
                }
                if (arr.length > 0) {
                    if (self.selectRightlists.length > 0) {
                        for (let i = 0; i < self.selectRightlists.length; i++) {
                            for (let j = 0; j < arr.length; j++) {
                                if (arr[j].id == self.selectRightlists[i].id) {
                                    arr[j].idShow = true
                                }
                            }
                        }
                        arr.forEach(ele => {
                            if (ele.idShow == false) {
                                self.selectRightlists.push({
                                    value: ele.value,
                                    id: ele.id,
                                    open: false
                                })
                                self.checkRightShow = false
                            }
                        })
                    } else {
                        self.selectRightlists = arr
                        self.checkRightShow = false
                    }
                }

            },
            //左箭头
            commodityRightClick() {
                var self = this
                let arr = []
                for (let i = 0; i < self.selectRightlists.length; i++) {
                    if (self.selectRightlists[i].open == false) {
                        arr.push(self.selectRightlists[i])
                    }
                }
                self.selectRightlists = arr
            },
            //右边全选
            checksRightClick() {
                var self = this
                self.checkRightShow = !self.checkRightShow
                if (self.checkRightShow == true) {
                    for (let i = 0; i < self.selectRightlists.length; i++) {
                        self.selectRightlists[i].open = true
                    }
                } else {
                    for (let i = 0; i < self.selectRightlists.length; i++) {
                        self.selectRightlists[i].open = false
                    }
                }

            },
            //单选职位右边
            checkRightClick(index) {
                var self = this
                self.selectRightlists[index].open = !self.selectRightlists[index].open
                self.checkRightShow = true
                for (let i = 0; i < self.selectRightlists.length; i++) {
                    if (self.selectRightlists[i].open == false) {
                        self.checkRightShow = false
                    }
                }
            },
            //确认
            postOkClick() {
                mapFun.$emit('postOkFun', this.selectRightlists)
            },
            //取消
            postCancelClick() {
                mapFun.$emit('postCancelFun')
            },
            ...mapActions(['getapiorgLabelValueList'])
        }
    };
</script>
<style scoped>
    .postBox {
        width: 960px;
        height: 500px;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
        animation: madalsBox 0.8s;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        border-radius: 4px;
    }

    @keyframes madalsBox {
        from {
            transform: translateY(-200px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .postCenter {
        width: 100%;
        height: 420px;
        background-color: #f4f4f5;
        display: flex;
    }


    .postLeft {
        width: 400px;
        height: 410px;
        margin-left: 30px;
    }

    .postLeftTop,
    .postRightTop {
        height: 45px;
        background-color: #f4f4f5;
        line-height: 55px;
        font-size: 16px;
        color: #000;
        padding-left: 5px;
    }

    .postLeftBot>div {
        width: 100%;
    }

    .postLeftBot {
        height: 365px;
        border-radius: 5px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid #fff;
    }

    .postLeftBotThr {
        height: 35px;
        margin-top: 5px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .postLeftBotThr>div:nth-child(1) {
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        margin-top: 5px;
        cursor: pointer;
    }

    .postLeftBotThr>div:nth-child(1)>img {
        width: 18px;
        height: 18px;
    }

    .postLeftBotThr>div:nth-child(2) {

        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
    }

    .postLeftBotFour {
        height: 300px;
        margin-top: 5px;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .postLeftBotFour ul li:hover {
        background-color: #f6f6f6;
    }

    .postLeftBotFour ul li {
        display: flex;
        align-items: center;
        height: 27px;
        width: 100%;
        padding-left: 30px;
        justify-content: space-between;
    }

    .centerLeftBotFourLiL>div:nth-child(1)>img:nth-child(1) {
        width: 16px;
        height: 16px;
    }

    .centerLeftBotFourLiL>div:nth-child(1)>img:nth-child(2) {
        width: 17px;
        height: 17px;
    }

    .centerLeftBotFourLiL>div:nth-child(1) {
        width: 17px;
        height: 17px;
        border-radius: 3px;
        border: 1px solid #ececec;
        margin-right: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .centerLeftBotFourLiL {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .postcenterRight {
        width: 400px;
        height: 410px;
        margin-left: 20px;
        background-color: #fff;
    }

    .postcenterCenter>div {
        width: 30px;
        height: 30px;
        background-color: #fff;
        color: #000;
        margin-top: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .postcenterCenter>div>img {
        width: 30px;
        height: 30px;
    }

    .postcenterCenter {
        width: 50px;
        height: 100%;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }


    .ModalsmemBot {
        width: 100%;
        height: 85px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f4f4f5;
    }


    .ModalsmemBot .el-button:nth-child(1) {
        margin-right: 22px;
    }

    .ModalsmemBot .el-button:nth-child(2) {
        margin-left: 22px;
    }
</style>